<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>weizhi</title>
    <style>
      .quanbu {
        width: 500px;
        height: 260px;
        background: #4caf50;
      }

      .zuobian {
        width: 125px;
        height: 260px;
        background: #b70a0a;
        float: left;
      }
      .youbian {
        width: 375px;
        height: 260px;
        background: #cc124c;
        float: left;
      }

      .shangqu {
        width: 375px;
        height: 155px;
        background: #af5d0a;
      }
      .xiaqu {
        width: 375px;
        height: 105px;
        background: #ffe0c0;
      }

      .zuoshang {
        width: 125px;
        height: 105px;
        background: #9d1243;
      }
      .zuoxia {
        width: 125px;
        height: 155px;
        background: #c6f584;
      }

      .youshang_zuo {
        width: 188px;
        height: 155px;
        background: #915f14;
        float: left;
      }
      .youshang_zhong {
        width: 82px;
        height: 155px;
        background: #d0a855;
        float: left;
      }
      .youshang_you {
        width: 105px;
        height: 155px;
        background: #e9cba0;
        float: left;
      }

      .youxia_zuo {
        width: 125px;
        height: 105px;
        background: #e95656;
        float: left;
      }
      .youxia_zhong {
        width: 125px;
        height: 105px;
        background: #4caf50;
        float: left;
      }
      .youxia_you {
        width: 125px;
        height: 105px;
        background: #8b7929;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="quanbu">
      <div class="zuobian">
        <div class="zuoshang"></div>
        <div class="zuoxia"></div>
      </div>
      <div class="youbian">
        <div class="shangqu">
          <div class="youshang_zuo"></div>
          <div class="youshang_zhong"></div>
          <div class="youshang_you"></div>
        </div>
        <div class="xiaqu">
          <div class="youxia_zuo"></div>
          <div class="youxia_zhong"></div>
          <div class="youxia_you"></div>
        </div>
      </div>
    </div>
  </body>
</html>
